<template>
  <view>
    <view class="search-box">
      <uni-search-bar :focus="true" :radius="100" @input="input" @clear="clearSearchList" cancelButton="none"></uni-search-bar>
    </view>
    <view class="search-list">
      <view class="search-list-box" v-for="(item,index) in searchList" :key="index" @click="goDetail(item)">
        <text class="search-name">{{item.goods_name}}</text>
        <uni-icons type="arrowright" size="15"></uni-icons>
      </view>
    </view>
    
    <view class="history-list" v-if="searchList.length==0">
      <view class="hostory-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="15" @click="clearHistory"></uni-icons>
      </view>
      <view class="history-box">
        <uni-tag :text="item" v-for="(item,index) in historys" @click="goGoodsList(item)" :key="index"></uni-tag>
      </view>
    </view>
    
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timeId:null,
        keyword:'',
        searchList:[],
        historyList:[]
      };
    },
    onLoad(){
      //获取搜索历史
      this.historyList = JSON.parse(uni.getStorageSync('keyword')||'[]')
    },
    computed:{
      historys(){
        //使最新的搜索关键词排在第一位
        return [...this.historyList].reverse()
      }
    },
    methods:{
      input(e){
        //防抖处理
        clearTimeout(this.timeId)
        this.timeId = setTimeout(()=>{
          //console.log(e)
          this.keyword = e
          //发送请求
          this.getSearchList()
          
        },500)
      },
      async getSearchList(){
        if(this.keyword === '')return
        const {data:res} = await uni.$http.get('/api/public/v1/goods/qsearch',{query:this.keyword})
        if(res.meta.status!==200)return uni.$showMsg()
        this.searchList = res.message
        this.saveHistory()
      },
      saveHistory(){
        //数组去重
        //创建set对象
        var set = new Set(this.historyList)
        //保存时先删除
        set.delete(this.keyword)
        //再添加
        set.add(this.keyword)
        //转换为数组
        this.historyList = Array.from(set)
        //将记录保存到本地 存储的对象最好转换为字符串
        uni.setStorageSync('keyword',JSON.stringify(this.historyList))
      },
      goDetail(item){
        uni.navigateTo({
          url:'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
        })
      },
      clearHistory(){
        this.historyList = []
        //删除本地历史
        uni.removeStorageSync('keyword')
      },
      clearSearchList(){
        this.searchList = []
      },
      //点击搜索历史跳转
      goGoodsList(item){
        uni.navigateTo({
          url:'/subpkg/goods_list/goods_list?query='+item
        })
      }
    }
  }
</script>

<style lang="scss">
.search-box{
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #C00000;
}
.search-list-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding:15px 10px;
  border-bottom: 1px solid #efefef;
  .search-name{
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.hostory-title{
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.history-box{
  padding: 0 10px;
  .uni-tag{
    margin-top: 5px;
    margin-right: 5px;
  }
  
}
</style>
